<?php $posts = $this->getPosts();?>
<?php 
if (count($posts) <= 0){
	echo 'false';
	exit;
}
?>
<div id="pop_club_box" class="pop_club_box">
<div class="opacity"></div>
<div class="pop_club">
<div class="content">
<div class="close_bt"><a href="javascript:hide_e('pop_club_box')"><img
	src="<?php echo $this->getSkinUrl(); ?>images/close_x.png" /></a></div>
<h1>Rapido Weekend 2010 gallery</h1>
<div class="big_img"><img src="<?php echo $this->getSkinUrl(); ?>images/temp_car_club.jpg" /></div>
<div class="img_list">
<div class="con">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<?php 
		$i = 1;
		$j = 1;
		foreach ($posts as $post){
			if ($i == 1){
				echo '<tr>';
			}
			echo "<td style='width:67px;'>
				<a href='javascript:'>
					<img id='gallery_$j' src='" . Mage::getModel('imageresize/imagemodel')->init(Mage::getBaseUrl ( 'media' ) . $post->getNfile ())->resize(67,44) . "'>
				</a>
				<input type='hidden' id='gallery_big_$j' value='" . Mage::getModel('imageresize/imagemodel')->init(Mage::getBaseUrl ( 'media' ) . $post->getNfile ())->resize(550,365) . "'/>
			</td>";
			$j++;
			if ($i >= 3){
				echo "</tr>";
				$i = 1;
			}else{
				$i++;
			}
		}
		if ($i <= 3){			
			for($i; $i <= 3; $i++){
				echo "<td style='width:67px;'>&nbsp;</td>";
				if($i == 4){
					echo "</tr>";
				}
			}
		}
	?>
</table>
</div>
<?php $cat = $this->getCat();?>
<a class="view_more" href="<?php echo $this->getUrl("imagegallery/cat") . $cat->getIdentifier() . "/page/{$this->getMore()}";?>"><img
	src="<?php echo $this->getSkinUrl(); ?>images/bt_view_more.png" /></a></div>
<br />
<table class="option_table" width="100%" border="0" cellspacing="0"
	cellpadding="0">
	<tr>
		<th>Click the arrows on the right to navigate through the gallery</th>
		<td align="right"><a href="javascript:" id="pre_img"><img
			src="<?php echo $this->getSkinUrl(); ?>images/sword_left_img.png" /></a>&nbsp;
			<a href="javascript:" id="next_img"><img
			src="<?php echo $this->getSkinUrl(); ?>images/sword_right_img.png" /></a></td>
	</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
;(function($){
	$.fn.extend({
		change:function(id){
    		$('div.img_list div.con img').removeClass('red_border').addClass('red_border_normal');
    		$('#gallery_' + id).removeClass('red_border_normal').addClass('red_border');
    		$('div.big_img img').attr('src', $('#gallery_big_' + id).val());
    	},
    	getTotal:function(){
			return $('div.img_list div.con img').size();
    	},
    	getCurrentId:function(){
			return $('img.red_border').attr('id').substring(8);
    	},
        nextImg:function(){
			var id = $().getCurrentId();
			var total = $().getTotal();
			id = Number(id) + 1;
			if(id > total){
				id = 1;
			}
			$().change(id);
			return false;
        },
    	preImg:function(){
    		var id = $().getCurrentId();
			var total = $().getTotal();
			id = Number(id) - 1;
			if(id < 1){
				id = total;
			}
			$().change(id);
			return false;
    	}    	
    });
})(jQuery);
jQuery().ready(function($){	
	$('div.img_list div.con img').click(function(){
		var id = $(this).attr('id').substring(8);
		$().change(id);				
	});
	$('#pre_img').click(function(){
		$().preImg();
	});
	$('#next_img').click(function(){
		$().nextImg();
	});
	$('div.img_list .view_more').click(function(e){
		e.preventDefault();
		get_url = $(this).attr('href');
		$.get(get_url,{i:1},function(html){
			$('#gallery_pop').html(html);
			$('#gallery_pop').show();
		},'html');
	});	
	$('#gallery_1').click();
});
</script>